<!doctype html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hog - 为采集而生</title>
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{'/static/images/favicon.ico'}"/>
    <!--/*@thymesVar id="themes" type=""*/-->
    <link th:href="@{'/static/easyui/themes/'+${themes}+'/easyui.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{'/static/easyui/themes/'+${themes}+'/easyui_animation.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{'/static/easyui/themes/'+${themes}+'/easyui_plus.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{'/static/easyui/themes/'+${themes}+'/insdep_theme_default.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{'/static/easyui/themes/'+${themes}+'/icon.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{'/static/easyui/plugin/font-awesome-4.7.0/css/font-awesome.min.css'}" rel="stylesheet"
          type="text/css">
    <script th:src="@{'/static/easyui/jquery.min.js'}" type="text/javascript"></script>
    <script th:src="@{'/static/easyui/jquery.easyui.min.js'}" type="text/javascript"></script>
    <script th:src="@{'/static/easyui/themes/'+${themes}+'/jquery.insdep-extend.min.js'}"
            type="text/javascript"></script>
</head>

<body>
<div id="master-layout">
    <div data-options="region:'north',border:false,bodyCls:'theme-header-layout'">
        <div class="theme-navigate">
            <div class="left">
                <a href="#" class="easyui-linkbutton left-control-switch"><i class="fa fa-bars fa-lg"></i></a>
                <a href="#" class="easyui-menubutton theme-navigate-user-button"
                   data-options="menu:'.theme-navigate-user-panel'">Hog</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm3',hasDownArrow:false">消息<span
                        class="badge color-default">15</span></a>

                <select id="cc1" class="easyui-combobox theme-navigate-combobox" name="dept" style="width:120px;">
                    <option>选择样式</option>
                    <option>Insdep</option>
                </select>

                <div id="mm3" class="theme-navigate-menu-panel" style="width:180px;">
                    <div>产品消息<span class="badge color-success">5</span></div>
                    <div>安全消息<span class="badge color-important">10</span></div>
                    <div>服务消息</div>
                    <div class="menu-sep"></div>
                    <div>查看历史消息</div>
                    <div class="menu-sep"></div>
                    <div>清除消息提示</div>
                </div>

                <div class="theme-navigate-user-panel">
                    <dl>
                        <dd>
                            <img src="/static/easyui/themes/insdep/images/portrait86x86.png" width="86" height="86">
                            <b class="badge-prompt">
                                Hog
                                <!--<i class="badge color-important">10</i>-->
                            </b>
                            <span>38978768@qq.com</span>
                            <p>安全等级：<i class="text-success">高</i></p>
                        </dd>
                        <dt>
                            <a class="theme-navigate-user-modify">修改资料</a>
                            <a class="theme-navigate-user-logout">注销</a>
                        </dt>
                    </dl>
                </div>
            </div>
            <div class="right">
                <a href="#" class="easyui-menubutton theme-navigate-more-button"
                   data-options="menu:'#more',hasDownArrow:false"></a>
                <div id="more" class="theme-navigate-more-panel">
                    <div>联系我们</div>
                    <div>参与改进计划</div>
                    <div>检测更新</div>
                    <div>关于</div>
                </div>
            </div>
        </div>

    </div>

    <!--开始左侧菜单-->
    <div data-options="region:'west',border:false,bodyCls:'theme-left-layout'" style="width:200px;">
        <!--正常菜单-->
        <div class="theme-left-normal">
            <!--theme-left-switch 如果不需要缩进按钮，删除该对象即可-->
            <div class="left-control-switch theme-left-switch"><i class="fa fa-chevron-left fa-lg"></i></div>

            <!--start class="easyui-layout"-->
            <div class="easyui-layout" data-options="border:false,fit:true">
                <!--start region:'north'-->
                <div data-options="region:'north',border:false" style="height:100px;">
                    <!--start theme-left-user-panel-->
                    <div class="theme-left-user-panel">
                        <dl>
                            <dt>
                                <img src="/static/easyui/themes/insdep/images/portrait86x86.png" width="43" height="43">
                            </dt>
                            <dd>
                                <b class="badge-prompt">
                                    Hog
                                    <!--<i class="badge color-important">10</i>-->
                                </b>
                                <span>为采集而生</span>
                                <p>安全等级：<i class="text-success">高</i></p>
                            </dd>

                        </dl>
                    </div>
                    <!--end theme-left-user-panel-->
                </div>
                <!--end region:'north'-->

                <!--start region:'center'-->
                <div data-options="region:'center',border:false">

                    <!--start easyui-accordion-->
                    <div class="easyui-accordion" id="easyui-accordion" data-options="border:false,fit:true,selected:-1">
                        <div title="任务队列管理">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a href="#prompt" class="menu-a">运行中的任务</a></li>
                                <li><a href="#prompt">就绪中的任务</a></li>
                                <li><a href="#prompt">暂停的任务</a></li>
                                <li><a href="#prompt">停止的任务</a></li>
                            </ul>
                        </div>
                        <div title="文章采集">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a href="#prompt">IT博客</a></li>
                                <li><a href="#prompt">新闻资讯</a></li>
                            </ul>
                        </div>
                        <div title="文件采集">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a href="#prompt">文件采集-1</a></li>
                                <li><a href="#prompt">文件采集-2</a></li>
                            </ul>
                        </div>
                        <div title="计划任务">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a href="#prompt">任务管理</a></li>
                                <li><a href="#prompt">调度日志</a></li>
                            </ul>
                        </div>
                        <div title="系统设置">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a href="#sys/options-list">基础设置</a></li>
                                <li><a href="#prompt">修改密码</a></li>
                            </ul>
                        </div>

                    </div>
                    <!--end easyui-accordion-->

                </div>
                <!--end region:'center'-->
            </div>
            <!--end class="easyui-layout"-->

        </div>
        <!--最小化菜单-->
        <div class="theme-left-minimal">
            <ul class="easyui-datalist" data-options="border:false,fit:true">
                <li><i class="fa fa-home fa-2x"></i>
                    <p>主题</p></li>
                <li><i class="fa fa-book fa-2x"></i>
                    <p>组件</p></li>
                <li><i class="fa fa-pencil fa-2x"></i>
                    <p>编辑</p></li>
                <li><i class="fa fa-cog fa-2x"></i>
                    <p>设置</p></li>
                <li><a class="left-control-switch"><i class="fa fa-chevron-right fa-2x"></i>
                    <p>打开</p></a></li>
            </ul>
        </div>

    </div>
    <!--结束左侧菜单-->
    <div data-options="region:'center',border:false" id="control"
         style="padding:20px; background:#fff;">
    </div>
</div>

<script>
    $(function () {
        /*布局部分*/
        $('#master-layout').layout({
            fit: true/*布局框架全屏*/
        });
        /*右侧菜单控制部分*/
        var left_control_status = true;
        var left_control_panel = $("#master-layout").layout("panel", 'west');
        $(".left-control-switch").on("click", function () {
            if (left_control_status) {
                left_control_panel.panel('resize', {width: 70});
                left_control_status = false;
                $(".theme-left-normal").hide();
                $(".theme-left-minimal").show();
            } else {
                left_control_panel.panel('resize', {width: 200});
                left_control_status = true;
                $(".theme-left-normal").show();
                $(".theme-left-minimal").hide();
            }
            $("#master-layout").layout('resize', {width: '100%'})
        });
        /*右侧菜单控制结束*/
        $(".theme-navigate-user-modify").on("click", function () {
            $('.theme-navigate-user-panel').menu('hide');
            $.insdep.window({id: "personal-set-window", href: "user.html", title: "修改资料"});

        });

        var cc1 = $('#cc1').combo('panel');
        cc1.panel({cls: "theme-navigate-combobox-panel"});

        $("#open-layout").on("click", function () {
            var option = {
                "region": "west",
                "split": true,
                "title": "title",
                "width": 180,

            };

            $('#master-layout').layout('add', option);
        });

        $(document).on("click", "a[route!='false'][href!='javascript:void(0)'][href!='javascript:;'][href!='#'][href!='']", function () {
            $("#easyui-accordion").find("a").addClass("selected_menu_a");
            $(this).removeClass("selected_menu_a");
            route($(this).attr("href"));
        });

        $("#easyui-accordion").find("a").addClass("selected_menu_a");

        var route = function (href) {
            var option = {
                "region": "center",
                "href": href.replace('#', ''),
                "border": false
            }

            $('#master-layout').layout('remove', "center");
            $('#master-layout').layout('add', option);
        }

        /*根据地址定位菜单位置*/
        var resourcePath = null;
        var currentUrl = window.location.href;
        var startIndex = currentUrl.indexOf('#');
        if (startIndex > -1) {
            resourcePath = currentUrl.substr(startIndex);
        }
        var firstMenuIndex = null;
        var secondMenuIndex = null;
        if (resourcePath != null) {
            var panelList = $('#easyui-accordion').children();
            var panelLen = panelList.length;
            for (var i = 0; i < panelLen; i++) {
                var hrefObj = $(panelList[i]).find('.easyui-datalist a[href="' + resourcePath + '"]');
                if (hrefObj.length > 0) {
                    var liList = hrefObj.eq(0).parents('.easyui-datalist').find('li');
                    var liLen = liList.length;
                    for (var k = 0; k < liLen; k++) {
                        if ($(liList[k]).find('a[href="' + resourcePath + '"]').length > 0) {
                            secondMenuIndex = k;
                            break;
                        }
                    }
                }
                if (secondMenuIndex != null) {
                    firstMenuIndex = i;
                    break;
                }
            }
        }

        if (firstMenuIndex != null && secondMenuIndex != null) {
            route(resourcePath);
            $('#easyui-accordion').accordion('select', firstMenuIndex);
            $('#easyui-accordion').accordion('getPanel', firstMenuIndex).find(".easyui-datalist").datagrid("selectRow", secondMenuIndex);
            $('#easyui-accordion').accordion('getPanel', firstMenuIndex).find(".easyui-datalist").datagrid("getPanel").find("a[href='" + resourcePath + "']").eq(0).removeClass("selected_menu_a");
        } else {
            route('#info');
            $('#easyui-accordion').accordion('select', 0);
        }
    });
</script>

<!--第三方插件加载-->
<script th:src="@{'/static/easyui/plugin/justgage-1.2.2/raphael-2.1.4.min.js'}" type="text/javascript"></script>
<script th:src="@{'/static/easyui/plugin/justgage-1.2.2/justgage.js'}" type="text/javascript"></script>
<script th:src="@{'/static/easyui/plugin/Highcharts-5.0.0/js/highcharts.js'}" type="text/javascript"></script>
<script th:src="@{'/static/easyui/plugin/ueditor-1.4.3.3/ueditor.config.js'}" type="text/javascript"></script>
<script th:src="@{'/static/easyui/plugin/ueditor-1.4.3.3/ueditor.all.min.js'}" type="text/javascript"></script>
<link th:href="@{'/static/easyui/plugin/cropper-2.3.4/dist/cropper.min.css'}" rel="stylesheet" type="text/css">
<script th:src="@{'/static/easyui/plugin/cropper-2.3.4/dist/cropper.min.js'}" type="text/javascript"></script>
<!--第三方插件加载结束-->
<style type="text/css">
    .selected_menu_a {
        color: #777878 !important;
    }
</style>
</body>
</html>
